<template>
  <div style="width: 100vw;height: 85vh;background-color: white;overflow: auto;scrollbar-width: none;position: relative">
    <div style="padding-top: 0.5rem;background-color: white">
      <i style="font-size: 1rem" class="iconfont icon-fanhui" @click="router.go(-1)"></i>
      <span style="margin-left: 35%">客服预定</span>
      <hr>
    </div>
    <div style="display:flex; width: 100%;
    font-weight: lighter;
    font-size: 15px;margin-left: 1rem">
      <div style="width: 30%;">宏达万枫酒店</div>
      <div>豪华大床房</div>

    </div>
    <div class="timetop">
      <div class="starttime">
        <div style="color: #7a7a7a; margin-bottom: 0.3rem">入住时间</div>
        <div style="color: #00b0b7; font-size: 0.7rem">12月28日</div>
      </div>
      <div class="numtime">
        <div style="color: #7a7a7a">共1晚</div>
        <i class="iconfont icon-changjiantou1 numtimeico"></i>
      </div>
      <div class="starttime">
        <div style="color: #7a7a7a; margin-bottom: 0.3rem">离店时间</div>
        <div style="color: #00b0b7; font-size: 0.7rem">12月29日</div>
      </div>
    </div>

    <div
      style="width: 100vw;height: 10vh;background-color: rgb(240,243,247);overflow: auto;scrollbar-width: none;display: flex">

      <div style="width: 10%; color:yellowgreen;margin-top: 0.5rem;margin-left: 1rem">
        <i class="iconfont icon-lvsegantanhao" style="font-size: 20px"></i>
      </div>
      <div style="font-size: 14px;width:70%;color:gray;margin-top: 0.5rem">
        您支付成功后，我们会在两个小时内处理您的订单，若不能确认订单，将全额退款之您的付款账户
      </div>
    </div>
    <!--    预定房间数量-->
    <div class="buydetail">
      <table>
        <tr>
          <td>预定间数</td>
          <td><i class="iconfont icon-jiahao"></i> 1 <i class="iconfont icon-jianhaoshouqi"></i></td>
        </tr>

        <tr>
          <td>入住人</td>
          <td><input type="text" placeholder="请填写入住人姓名"></td>
        </tr>
        <tr>
          <td>手机号</td>
          <td><input type="text" placeholder="1377777777"></td>
        </tr>
        <tr style="text-align: center;color: #7a7a7a">
          <td colspan="2">接受预定通知手机号：1377777</td>
        </tr>
        <tr @click="router.push('/coupon')">
          <td>优惠卷</td>
          <td style="text-align: right;color: #c40101" >2张可用
            <i style="font-size: 1rem" class="iconfont icon-youjiantou" ></i>
          </td>
        </tr>
      </table>
    </div>
    <!--    分割线-->
    <div style="width: 100%;height: 0.5rem; background-color: #e5e5e5">
    </div>
    <!--    留言-->
    <div>
       <textarea
         style="width: 100%; height: 3rem; border: none; font-size: 15px;margin-left: 1rem"
         placeholder="留言不得多余30个汉字"></textarea>
    </div>
    <!--    分割线-->
    <div style="width: 100%;height: 0.5rem; background-color: #e5e5e5">
    </div>
    <!--    支付方式-->
    <div class="paytype">
      <div>请选择支付方式</div>
      <table>
        <tr >
          <td style="width: 7%;"><i
            style="color: green"
            class="iconfont icon-weixinzhifu"></i></td>
          <td>微信支付</td>
          <td style="text-align: right"><input type="checkbox" name="" id=""></td>
        </tr>
        <tr>
          <td><i
            style="color: #838302"
            class="iconfont icon-yuezhifu"></i></td>
          <td>余额支付</td>
          <td style="text-align: right"><input type="checkbox" name="" id=""></td>
        </tr>
        <tr>
          <td><i
            style="color: deepskyblue"
            class="iconfont icon-xingzhuangkaobei"></i></td>
          <td>好友代付</td>
          <td style="text-align: right"><input type="checkbox" name="" id=""></td>
        </tr>
      </table>
    </div>
    <!--  支付-->
<div class="paycon">
  <div style=" margin: 0.5rem 0px 0 1rem; width: 70%;">需要支付
    <span style="color:red;">
    ￥598.00
  </span>
    <span style="font-size: 15px;font-weight: lighter;margin-left: 20%">
      明细 <i style="color:#00868d;font-size: 17px" class="iconfont icon-xiajiantou"></i>
    </span>
  </div>
  <div class="paybtn">
    提交订单
  </div>
  <div>

  </div>
</div>
  </div>

</template>

<script setup>
import {useRouter} from "vue-router";

const router = useRouter()
</script>

<style lang="scss" scoped>
.timetop {
  margin: 1rem 2rem;
  width: 100%;
  height: 2rem;
  display: flex;



  .starttime {
    width: 30%;
    height: 100%;
    font-size: 0.5rem;
  }

  .numtime {
    width: 30%;
    font-size: 0.5rem;

    .numtimeico {
      font-size: 2rem;
      color: #00b0b7;
    }
  }
}

.buydetail {
  font-size: 17px;
  width: 100%;
  margin: 1rem 0 0 1rem;

  table {
    width: 90%;

    tr {

      td {
        height: 2rem;

        i {
          font-size: 1rem;
          color: #7a7a7a;
        }

        input {
          border: none;
        }
      }
    }
  }
}

.paytype {
  font-size: 17px;
  width: 100%;
  height: 5rem;
  margin: 0.5rem 0 0 1rem;
  table {
    width: 90%;
    tr {
      height: 1.5rem;
      td {
        i {
          font-size: 20px;
        }
      }
    }
  }
}
.paycon{
display: flex;
  font-size: 20px;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  height: 2.5rem;
  bottom: 2rem;
  overflow: hidden;
  border: 0.01rem solid grey;
  .paybtn{
    width: 30%;
    margin: 0 0 0 1rem;
    background-color: #0482b0;
    color: #eeeeee;
    font-size: 17px;
    text-align: center;
    line-height: 2.5rem;

  }
}
</style>
